// mela onlie 购物车界面 订制
import { PureComponent } from "react";
import { Button, Modal,List,Stepper,TabBar,PullToRefresh,ListView,Checkbox} from "antd-mobile";
// import { StickyContainer, Sticky } from 'react-sticky';
import { connect } from 'dva';
import { ActivityIndicator } from 'antd-mobile';
import { handleImg, goToPage,handleOSS } from "../../utils/helper";
import { InputItem } from 'antd-mobile';
import {IntlProvider, addLocaleData,FormattedMessage} from 'react-intl';
import localeData from '../../../public/lang/data.json';
import { Row, Col } from 'antd';
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
import { isNull } from '../../utils/helper';
import ReactDOM from 'react-dom';
import { CheckCircleFilled } from '@ant-design/icons';
import MToast from '../../components/Util/MToast';
// const CheckboxItem = Checkbox.CheckboxItem;
const alert = Modal.alert;
const Item = List.Item;
@connect(() => {
  return ({

  })
})
export default class GoodCart extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      cartItems: [],
      currentItem_id: -1,
      currentQuantity: 20,
      checkItem:[],
      ArrItems:[],
      totalPrice1:0,
      isButton:true,//买的按钮状态
      selectedTab: 'greenTab',
      isBackground:false,
      isBackground1:false,
      isBackground2:false,
      pages:{
        pageNum:1,
        pageSize:20
      },
      hasMore: true,
      refreshing: true,
      isLoading: true,
      height: document.documentElement.clientHeight,
      useBodyScroll: false,
      isEnd:false,
      itemArr1:[],
      noLogin:false,
      indeterminate: false, // 半选
      checkAll: false, // 全选
      checkedNum: 0,
    }
  }
  componentWillMount() {
    let { dispatch, location } = this.props;
    dispatch({
      type: "global/setHeaderTitle",
      payload: {
        title: T(localeData[localStorage.locale].cartTitle),
        path: location.pathname + location.search
      }
    });
    console.log(localStorage[MI_APP_CODE + "phone"])
    if(	localStorage[MI_APP_CODE + "phone"]==undefined){
      console.log("不是购物车")
      this.setState({
        noLogin:false
      })
    }else{
      console.log("是购物车")
      this.setState({
        noLogin:true
      })
    }
    // if(	localStorage[MI_APP_CODE + "username"]=="Qx,.)(&qX(!)@.,"){
    //   goToPage({ dispatch, config: { url: "/ungoodcart" }, isReplace: false })
    // }else{
    //
    // }
    localStorage.removeItem("cartItemsList")
    this.cartList();

    return;
    setTimeout(() => {
      this.setState({
        loading: false,
        cartItems: [
          {
            item_id: 1,
            img_url: "http://api.ab.appbuilder.saas.upos.it//public/uploads//upos_melarossa/20200303/95f1_2b19_1583239655234.jpg",
            goods_name: "dell 笔记本电脑，韩国KN94口罩医用dell 笔记本电脑，韩国KN94口罩医用dell 笔记本电脑，韩国KN94口罩医用",
            goods_id: 10,
            price: 20.99,
            quantity: 2,
            member_nickname: ""
          }, {
            item_id: 2,
            img_url: "http://api.ab.appbuilder.saas.upos.it//public/uploads//upos_melarossa/20200303/95f1_2b19_1583239655234.jpg",
            goods_name: "dell 笔记本电脑，韩国KN94口罩医用dell 笔记本电脑，韩国KN94口罩医用dell 笔记本电脑，韩国KN94口罩医用",
            goods_id: 10,
            price: 20.99,
            quantity: 2,
            member_nickname: ""
          }, {
            item_id: 3,
            img_url: "http://api.ab.appbuilder.saas.upos.it//public/uploads//upos_melarossa/20200303/95f1_2b19_1583239655234.jpg",
            goods_name: "dell 笔记本电脑，韩国KN94口罩医用dell 笔记本电脑，韩国KN94口罩医用dell 笔记本电脑，韩国KN94口罩医用",
            goods_id: 10,
            price: 20.99,
            quantity: 2,
            member_nickname: ""
          }, {
            item_id: 4,
            img_url: "http://api.ab.appbuilder.saas.upos.it//public/uploads//upos_melarossa/20200303/95f1_2b19_1583239655234.jpg",
            goods_name: "dell 笔记本电脑，韩国KN94口罩医用dell 笔记本电脑，韩国KN94口罩医用dell 笔记本电脑，韩国KN94口罩医用",
            goods_id: 10,
            price: 20.99,
            quantity: 2,
            member_nickname: ""
          }, {
            item_id: 5,
            img_url: "http://api.ab.appbuilder.saas.upos.it//public/uploads//upos_melarossa/20200303/95f1_2b19_1583239655234.jpg",
            goods_name: "dell 笔记本电脑，韩国KN94口罩医用dell 笔记本电脑，韩国KN94口罩医用dell 笔记本电脑，韩国KN94口罩医用",
            goods_id: 10,
            price: 20.99,
            quantity: 2,
            member_nickname: ""
          }, {
            item_id: 6,
            img_url: "http://api.ab.appbuilder.saas.upos.it//public/uploads//upos_melarossa/20200303/95f1_2b19_1583239655234.jpg",
            goods_name: "dell 笔记本电脑，韩国KN94口罩医用dell 笔记本电脑，韩国KN94口罩医用dell 笔记本电脑，韩国KN94口罩医用",
            goods_id: 10,
            price: 20.99,
            quantity: 2,
            member_nickname: ""
          }, {
            item_id: 7,
            img_url: "http://api.ab.appbuilder.saas.upos.it//public/uploads//upos_melarossa/20200303/95f1_2b19_1583239655234.jpg",
            goods_name: "dell 笔记本电脑，韩国KN94口罩医用dell 笔记本电脑，韩国KN94口罩医用dell 笔记本电脑，韩国KN94口罩医用",
            goods_id: 10,
            price: 20.99,
            quantity: 2,
            member_nickname: ""
          }, {
            item_id: 8,
            img_url: "http://api.ab.appbuilder.saas.upos.it//public/uploads//upos_melarossa/20200303/95f1_2b19_1583239655234.jpg",
            goods_name: "dell 笔记本电脑，韩国KN94口罩医用dell 笔记本电脑，韩国KN94口罩医用dell 笔记本电脑，韩国KN94口罩医用",
            goods_id: 10,
            price: 20.99,
            quantity: 2,
            member_nickname: ""
          }, {
            item_id: 9,
            img_url: "http://api.ab.appbuilder.saas.upos.it//public/uploads//upos_melarossa/20200303/95f1_2b19_1583239655234.jpg",
            goods_name: "dell 笔记本电脑，韩国KN94口罩医用dell 笔记本电脑，韩国KN94口罩医用dell 笔记本电脑，韩国KN94口罩医用",
            goods_id: 10,
            price: 20.99,
            quantity: 2,
            member_nickname: ""
          }

        ]
      })
    }, 1000);
    return;
  }
  // componentDidUpdate() {
  //   if (this.state.useBodyScroll) {
  //     document.body.style.overflow = 'auto';
  //   } else {
  //     document.body.style.overflow = 'hidden';
  //   }
  // }
  componentDidMount() {
    const hei = this.state.height-220;
    console.log(this.state.height)
    setTimeout(() => this.setState({
      height: hei,
    }), 0);
  }
  cartList=()=>{
    let { dispatch, location } = this.props;
    let {isEnd,isOn}= this.state;
    dispatch({
      type: "form/query",
      payload: {
        apiInfo: {
          url: "cart/list",
          params: [
            {
              key: "goods_id",
              value: "-1"
            }
          ]
        },
        callback: (result) => {
          let { data } = result;
          let{cartItems,aaItem}=this.state;
          var checkJson1 = this.state.cartItems
          this.setState({
            loading:false,
            cartItems:data.cart_items.sort(this.compare('status')),
            checkAll: false,
            indeterminate: false,
            totalPrice1:0,

          })
        }
      }
    })
  }
  onRefresh = () => {
    this.setState({ refreshing: true,  });
    setTimeout(() => {
      this.cartList();
      this.setState({ refreshing: false });
    }, 600);

  };
  // onRefresh = () => { //下拉刷新
  //   this.state.pages.pageNum = 1;
  //   this.setState({ refreshing: true, isLoading: true ,pages:this.state.pages,newsList:[]});
  //   setTimeout(() => {
  //     this.cartList1(this.state.pages);
  //   }, 600);
  // }
  // 滑动到底部时加载更多
  onEndReached = (event) => {//触底加载
    // if (this.state.isLoading) {
    //   return;
    // }
    // this.setState({ isLoading: true });
    // setTimeout(() => {
    //   this.cartList1(this.state.pages)
    // }, 600);
  }
  check = (id) => {
    const { cartItems } = this.state;
    // 多选 选择、取消选择
    let checkOptionsArr = [];
    for (let i = 0; i < cartItems.length; i++) {
        let tag = cartItems[i];
        if (tag.item_id === id) {
          checkOptionsArr.push({
            ...tag,
            checked: !tag.checked,
          });
        } else {
          checkOptionsArr.push({
            ...tag,
          });
        }


    }
    // 多选框、件数
    let num = 0;
    let totalPrice=0
    for (let j = 0; j < checkOptionsArr.length; j++) {
      if (checkOptionsArr[j].checked) {
        num++;
        totalPrice += checkOptionsArr[j].price * checkOptionsArr[j].quantity;
        this.setState({
          totalPrice1:totalPrice,
          isButton:false
        })
      }
    }
    var cartItemArr=[];
    cartItems.map((item)=>{
      if(item.status=="1"){
        cartItemArr.push(item)
      }
    })
    if (num === 0) {
      this.setState({
        checkAll: false,
        indeterminate: false,
        totalPrice1:0,
        isButton:true
      });
    } else if (num === cartItemArr.length) {
      this.setState({
        checkAll: true,
        indeterminate: false,
      });
    } else {
      this.setState({
        indeterminate: true,
      });
    }
    this.setState({
      cartItems: checkOptionsArr,
      checkedNum: num,
    });
    console.log(checkOptionsArr)
  };
  onCheckAllChange = () => {
    const { cartItems, checkedNum } = this.state;
    let totalPrice=0
    console.log(cartItems)
    // 全选
    let checkOptionsArr = [];
    for (let i = 0; i < cartItems.length; i++) {
      let tag = cartItems[i];
        if(cartItems[i].status=="1"){
          checkOptionsArr.push({
            ...tag,
            checked: true,
          });
        }else{
          checkOptionsArr.push({
            ...tag,
            checked: false,
          });
        }


      console.log(checkOptionsArr)

    }
console.log(checkOptionsArr)
    // 全不选
    let checkOptionsNone = [];
    for (let i = 0; i < cartItems.length; i++) {

        let tag = cartItems[i];
        checkOptionsNone.push({
          ...tag,
          checked: false,
        });

    }
    if (checkedNum !== checkOptionsArr.length) {
      checkOptionsArr.map((item)=>{
      if(item.status=="1"){
        totalPrice += item.price * item.quantity
        console.log(totalPrice)
        this.setState({
        totalPrice1:totalPrice,
        totalPrice2:totalPrice,
      })
        console.log(this.state.totalPrice1)
    }else{

    }



      })
      // 全选

      this.setState({
        cartItems: checkOptionsArr,
        indeterminate: false,
        checkAll: true,
        checkedNum: checkOptionsArr.length,
        isButton:false
      });
    } else {
      // 全不选
      this.setState({
        cartItems: checkOptionsNone,
        indeterminate: false,
        checkAll: false,
        checkedNum: 0,
        totalPrice1:0,
        isButton:true
      });
    }
  };
  renderList() {
    console.log("我是多选")
    let { cartItems,checked,isOn, quantityValue,currentQuantity,} = this.state;
    if (!cartItems || cartItems.length == 0) {
      return (
        <div style={{ padding: "40px 0", textAlign: "center", fontSize: "20px", color: "#555" }}>
          {T(localeData[localStorage.locale].goodsDetailCartNoGood)}
        </div>
      )
    }
    else {
      console.log(cartItems,isOn)
      let contents = [];
      return (
        <div style={{}}>
          {/*<div style={{ padding: "10px", fontSize: "16px", borderBottom: "1px solid #ddd", wordBreak: "break-all", lineHeight: 2 }} className="ellipsis1">*/}
          {/*{localStorage[MI_APP_CODE + "name"]}*/}
          {/*</div>*/}
          <div style={{margin:'0px 0 3%',background:'#F6F6FC'}}>
            {
              cartItems.map((i, k) => {
                let { img_url,goods_name, price, quantity, item_id, } = i;
                let img_url1= i.img_url.split(",")[0]
                console.log(img_url1)
                console.log(checked,quantityValue,currentQuantity,img_url.split(",")[0]);
                if(i.status=="1"){
                  return (

                    <div key={k}  style={{ padding: "0px 0px 0px 0",background:'#fff',marginBottom:'0.58em',height:'105px' }} >
                      <div id={item_id} style={{width:'100%',overflow:'hidden',position:'relative'}}>
                        <Checkbox checked={i.checked} style={{position:'absolute',left:'3%',top:'22%'}} className="cart" onClick={this.check.bind(this,item_id)}>
                        </Checkbox>
                        <div style={{float:'left',width:'80%',paddingTop:'17px',marginLeft:'10%'}} >
                            <div style={{float:'left',verticalAgain:'middle',width:'4.7em'}}>
                              <img src={handleOSS(img_url1)} alt="" style={{ width: "4.7em",height:"4.7em",borderRadius:'50%',marginRight:'5px'}} />
                            </div>
                            <div style={{width:"61%",float:'left',marginLeft:'1.05em',fontSize:'0.9em'}}>
                              <div className="ellipsis2" style={{width:'100%',padding:'0 10px 0 0',color:'#595867',height:'40px'}}>
                                {goods_name}
                              </div>
                              <div style={{marginTop:'1em',overflow:'hidden'}}>
                                <div style={{float:'left',color:'#F09600',fontWeight:'bold'}}>€ {price}</div>
                                <div style={{float:'right',color:'#9C9BAB',fontWeight:'bold',fontSize:'0.8em'}}>x{quantity}</div>
                              </div>

                            </div>

                        </div>

                        <div onClick={() => {
                          this.setState({
                            visible: true,
                            currentItem_id: item_id,
                            currentQuantity: quantity,
                            isBackground:false,
                            isBackground1:false,
                            isBackground2:false,
                          })
                        }} style={{float:'right',verticalAgain:'middle',width:'10%',paddingTop:'35px'}}>
                          <img src="image/cart_edit.png" alt="" style={{ width: "24px",marginRight:'10px' }} />
                        </div>

                      </div>


                    </div>

                  )
                }else{
                  return (
                    <div key={k}  style={{ padding: "0px 0px 0px 0",background:'#fff',marginBottom:'0.58em',height:'105px' }}>
                      <div id={item_id} style={{width:'100%',overflow:'hidden',position:'relative'}}>
                        <Checkbox checked={false} style={{position:'absolute',left:'0px',left:'0px'}} className="cart" disabled>
                        </Checkbox>
                        <div style={{float:'left',width:'80%',paddingTop:'17px',marginLeft:'10%'}}>
                            <div style={{float:'left',verticalAgain:'middle',width:'4.7em'}}>
                              <img src={handleOSS(img_url1)} alt="" style={{ width: "4.7em",height:"4.7em",borderRadius:'50%',marginRight:'5px'}} />
                            </div>
                            <div style={{width:"61%",float:'left',marginLeft:'1.05em',fontSize:'0.9em'}}>
                              <div className="ellipsis2" style={{width:'100%',padding:'0 10px 0 0',color:'#C0C4CC',height:'40px'}}>
                                {goods_name}
                              </div>
                              <div style={{marginTop:'1em',overflow:'hidden'}}>
                                <div style={{float:'left',color:'#C0C4CC',fontWeight:'bold'}}>€ {price}</div>
                                <div style={{float:'right',color:'#C0C4CC',fontWeight:'bold',fontSize:'0.8em'}}>{T(localeData[localStorage.locale].cartSold)}</div>
                              </div>

                            </div>


                        </div>

                        <div onClick={() => {
                          this.deleteCarItem(item_id)
                          this.setState({
                            currentItem_id:item_id,
                            currentQuantity:quantity,
                            isBackground:false,
                            isBackground1:false,
                            isBackground2:false,
                          })
                        }} style={{float:'right',verticalAgain:'middle',width:'10%',paddingTop:'35px'}}>
                          <img src="image/cart_delete.png" alt="" style={{ width: "24px",marginRight:'10px' }} />
                        </div>

                      </div>


                    </div>


                  )
                }

                console.log(quantityValue)
              })
            }
          </div>
        </div>
      )
    }
  }
  onChange = (val,e) => {
    console.log(val.length);
    let value = val;
    const reg1 = /^[0-9]{1,}.{0,1}([0-9]*)?$/;
    const reg = /^(([0-9]{0,})|([0-9]{1,}.{0,1}))([0-9]*)?$/;//匹配 - 号开头的数
    if(val.length==0){
      console.log("yyyy")
      value=1
      this.setState({
        quantityValue: value,
      })
    }
    if ((reg.test(value)) || (reg1.test(value))) {
      console.log("rrr")
      // value =1
      if (value.toString().indexOf(".") == value.length - 1) {
      }
      else if (value.toString().indexOf("-") == 0) {
        if (!isNaN(parseFloat(value))) {
          if (parseFloat(value) == 0) {

          }
          else {
            value = parseFloat(value)
          }
        }
      }
      else if (isNaN(value)) {
        value = parseFloat(value)
      }else if(value==0){
        console.log("ddddddddddddddd")
        value =1
      }
      // else if(value>100){
      //   value=100
      // }
      else {
        // value=Number(value)//会把0.0 设置成0 小数点后的0输不进去
      }
      this.setState({
        quantityValue: value,
      })
    }
  };
  suerClick=()=>{
    let { dispatch } = this.props;
    dispatch({
      type: "form/query",
      payload: {
        apiInfo: {
          url: "qry/exec?_c=opreation_log",
          params: [
            {
              "key": "opreation_info",
              "value":"确认下单按钮"
            },
            {
              "key": "opreation_id",
              "value":"4"
            }
          ]
        },
        callback: (result) => {
          console.log(result)
        }
      }
    })
  }
  orderClick=() => {
    let { dispatch } = this.props;
    let {cartItems,itemArr1} = this.state;
    var arrJson=this.state.itemArr1
    console.log(cartItems)
    this.suerClick();
    cartItems.map((item)=>{
      if(item.checked){
        arrJson.push(item.item_id)
      }

    })
    console.log(arrJson)
    dispatch({
      type: "form/query",
      payload: {
        apiInfo: {
          url: "order/checkOrderGoods",
          params: [
            {
              "key": "item_id",
              "value":arrJson
            },

          ]
        },
        callback: (result) => {
          if(result.code ==10200){
            console.log(result.data.items)
            localStorage.setItem("cartItemsList",JSON.stringify(result.data.items))
            goToPage({ dispatch, config: { url: "/placeOrder" }, isReplace: false })
          }else{
            MToast.info(result.msg);

          }


        }
      }
    });


  }
  deleteCarItem = (item_id) => {
    let { cartItems } = this.state;
    let { dispatch } = this.props;
    let newCarItems = cartItems.filter(i => i.item_id != item_id);
    var newCarItemsArr=[]
    this.setState({
      cartItems: newCarItems,
      visible: false,
      // onClose:false
    })
    console.log(cartItems,newCarItems)
    newCarItems.map((item)=>{
      if(item.status=="1"){
        newCarItemsArr.push(item)
      }else{

      }
    })
    console.log(newCarItemsArr)
    if(newCarItemsArr.length=="0"){
      this.setState({
        // onChecked:false,
        totalPrice1:0
      })
    }
    dispatch({
      type: "form/query",
      payload: {
        apiInfo: {
          url: "cart/delete",
          params: [
            {
              key: "item_id",
              value: item_id
            }
          ]
        },
        callback: (result) => {
          let { data } = result;
          console.log(data)
          MToast.info(T(localeData[localStorage.locale].deleteGood), 1, null, 0)
        }
      }
    })
  }
  //修改当前state中的购物车数据 掉接口往购物车修改数据
  changeCartItemNumber = () => {
    let { dispatch } = this.props;
    let { currentItem_id, currentQuantity, cartItems, quantityValue, } = this.state;
    console.log(currentItem_id, currentQuantity, cartItems,quantityValue);
    console.log("dddddddd")
    let newCarItems = cartItems.map(i => {
      if (i.item_id == currentItem_id) {
        return {
          ...i,
          quantity: quantityValue
        }
      }
      else {
        return {
          ...i
        }
      }

    })
    this.setState({
      cartItems: newCarItems
    })
    dispatch({
      type: "form/query",
      payload: {
        apiInfo: {
          url: "cart/update/quantity",
          params: [
            {
              key: "item_id",
              value: currentItem_id
            },
            {
              key: "quantity",
              value: quantityValue
            }
          ]
        },
        callback: (result) => {
          let { data } = result;
          this.setState({
            loading:true
          })
          if(data.status=='0'){
            alert(T(localeData[localStorage.locale].cartSold));


          }else{

          }
          this.cartList();
        }
      }
    })

    // else if(quantityValue==""){
    //      alert("请输入数量");
    //      this.setState({
    //        visible2:true
    //      })
    //    }else if(quantityValue=="0"){
    //      console.log("fffffffffffff")
    //      alert("不能输入0");
    //
    //      this.setState({
    //        quantityValue:'',
    //        visible2:true
    //      })
    //      console.log(document.getElementById("number"))
    //
    //    }

  }
  compare=(status)=>{
    return function(a,b){
      var value1 = a[status];
      var value2 = b[status];
      return value2 - value1;
    }
  }
  render() {
    let { dispatch } = this.props;
    let { loading, cartItems, currentQuantity, currentItem_id,isOn,totalPrice1,onChecked,isButton,
      isBackground,isBackground1,isBackground2,checked,noLogin,indeterminate,checkAll,checkedNum,checkOptions } = this.state;
    const messages = localeData[localStorage.locale];
    console.log(noLogin)
    if (loading) {
      return (
        <div className="normal">
          <ActivityIndicator toast text={messages.loading} animating={true} />
        </div>
      )
    }
    return (
      <IntlProvider
        locale={ localStorage.locale } messages={messages}
      >
        <div className="normal" style={{ background: "#fff", minHeight: "100%" }}>
          <div style={{marginBottom:"40px"}}>
            <PullToRefresh
              damping={60}
              ref={el => this.ptr = el}
              style={{
                height: this.state.height,
                overflow: 'auto',
              }}
              refreshing={this.state.refreshing}
              onRefresh={this.onRefresh}
            >
              {this.renderList()}
            </PullToRefresh>

          </div>
          {
          cartItems && cartItems.length > 0 &&
          <div style={{position: "fixed", bottom: '9%', width: "100%", borderTop: "1px solid #ddd", background: "#fff",zIndex:"2", }}>
          <div style={{ fontSize: "14px",margin:'8px 0 0 10px',width:'100%' }}>
            <Checkbox   onChange={this.onCheckAllChange} indeterminate={indeterminate} checked={checkAll} style={{paddintLeft:'5px',color:'#F09600',fontWeight:'bold',}}>
              &nbsp;{messages.cartCheck}


            {/*<span>已选择&nbsp;{checkedNum}&nbsp;件</span>*/}
          </Checkbox>
            <span style={{width:'60%',display:"inline-block"}}>
                <span style={{marginLeft:'7%',display:'inline-block',fontSize:'16px',color:'#2E2D35',fontWeight:'bold',}}>{messages.cartSub}</span>
                <span style={{ color: "#F09600",fontSize:'20px',fontWeight:'bold',marginLeft:'0.5em' }}>€ {totalPrice1.toFixed(2)}</span>
              </span>
          </div>

          <Button  type="primary" size="default" style={{padding: "0 10px", background:'#F09600', fontSize: "18px",width:'15.5em',margin:'1em auto 0.59em',borderRadius:'20px',border:'0px',height:'42px',lineHeight:'42px' }} onClick={this.orderClick} disabled={isButton}>{messages.cartConfirm}</Button>

          </div>

          }
          <div style={{position:'fixed',bottom:'0px',left:'0px',width:'100%'}}> <TabBar
            unselectedTintColor="#949494"
            tintColor="#F09600"
            barTintColor="white"
            hidden={this.state.hidden}
          >
            <TabBar.Item
              title={messages.home}
              key="Life"
              icon={<div style={{
                width: '24px',
                height: '24px',
                background: 'url(image/home2.png) center center /  21px 21px no-repeat' }}
              />
              }
              selectedIcon={<div style={{
                width: '24px',
                height: '24px',
                background: 'url(image/home3.png) center center /  21px 21px no-repeat' }}
              />
              }
              selected={this.state.selectedTab === 'redTab'}
              onPress={() => {
                this.setState({
                  selectedTab: 'redTab',
                });
                goToPage({ dispatch, config: { url: "/shop_home" }, isReplace: false })
              }}
              data-seed="logId"
            >

            </TabBar.Item>
            <TabBar.Item
              icon={
                <div style={{
                  width: '24px',
                  height: '24px',
                  background: 'url(image/category.png) center center /  21px 21px no-repeat' }}
                />
              }
              selectedIcon={
                <div style={{
                  width: '24px',
                  height: '24px',
                  background: 'url(image/category1.png) center center /  21px 21px no-repeat' }}
                />
              }
              title={messages.category}
              key="Koubei"

              selected={this.state.selectedTab === 'blueTab'}
              onPress={() => {
                this.setState({
                  selectedTab: 'blueTab',
                });
                goToPage({ dispatch, config: { url: "/category" }, isReplace: false })
              }}
              data-seed="logId1"
            >

            </TabBar.Item>
            {noLogin?<TabBar.Item
              icon={
                <div style={{
                  width: '24px',
                  height: '24px',
                  background: 'url(image/cart4.png) center center /  21px 21px no-repeat' }}
                />
              }
              selectedIcon={
                <div style={{
                  width: '24px',
                  height: '24px',
                  background: 'url(image/cart5.png) center center /  21px 21px no-repeat' }}
                />
              }
              title={messages.cart}
              key="Friend"
              selected={this.state.selectedTab === 'greenTab'}
              onPress={() => {
                this.setState({
                  selectedTab: 'greenTab',
                });
                goToPage({ dispatch, config: { url: "/goodcart" }, isReplace: false })
              }}
            >
            </TabBar.Item>
              :
              <TabBar.Item
                icon={
                  <div style={{
                    width: '24px',
                    height: '24px',
                    background: 'url(image/cart4.png) center center /  21px 21px no-repeat' }}
                  />
                }
                selectedIcon={
                  <div style={{
                    width: '24px',
                    height: '24px',
                    background: 'url(image/cart5.png) center center /  21px 21px no-repeat' }}
                  />
                }
                title={messages.cart}
                key="Friend"
                selected={this.state.selectedTab === 'greenTab'}
                onPress={() => {
                  this.setState({
                    selectedTab: 'greenTab',
                  });
                  goToPage({ dispatch, config: { url: "/ungoodcart" }, isReplace: false })
                }}
              >
              </TabBar.Item>
            }

            <TabBar.Item
              icon={ <div style={{
                width: '24px',
                height: '24px',
                background: 'url(image/my.png) center center /  24px 24px no-repeat' }}
              />}
              selectedIcon={ <div style={{
                width: '24px',
                height: '24px',
                background: 'url(image/my1.png) center center /  24px 24px no-repeat' }}
              />}
              title={messages.my}
              key="my"
              selected={this.state.selectedTab === 'yellowTab'}
              onPress={() => {
                this.setState({
                  selectedTab: 'yellowTab',
                });
                goToPage({ dispatch, config: { url: "/my" }, isReplace: false })
              }}

            >

            </TabBar.Item>
          </TabBar></div>
          <Modal
            popup
            visible={this.state.visible}
            onClose={() => {
              this.setState({
                visible: false
              })
            }}
            animationType="slide-up"
            afterClose={() => { }}
          >
            <div style={{  }}>
              <Row style={{padding: "5% 10% 5%",background:isBackground?'#f0f2f5':'#fff'}}
                onClick={() => {
                  this.setState({ visible2: true,
                    quantityValue: currentQuantity,
                    isBackground:true,
                    isBackground1:false,
                    isBackground2:false,
                  })}}>
                <Col span={2} style={{marginRight:'2%'}}><img src="image/cart_edit.png" style={{width:'24px',height:'24px'}}/></Col>
                <Col span={19}  style={{color:'#2E2D35',fontSize:"16px",textAlign:'left',padding:'0 5%'}}>{T(messages.cartNum)}</Col>
              </Row>
              <Row style={{padding: "5% 10% 5%",background:isBackground1?'#f0f2f5':'#fff'}} onClick={() => {
                this.setState({
                  isBackground:false,
                  isBackground1:true,
                  isBackground2:false,
                })
                this.deleteCarItem(currentItem_id)
              }}>
                <Col span={2} style={{marginRight:'2%'}}><img src="image/delete_24.png" style={{width:'24px',height:'24px'}}/></Col>
                <Col span={19}  style={{color:'#2E2D35',fontSize:"16px",textAlign:'left',padding:'0 5%'}}>{T(messages.cartDel)}</Col>
              </Row>
              <Row style={{padding: "5% 10% 5%",background:isBackground2?'#f0f2f5':'#fff'}} onClick={() => {
                this.setState({
                  visible: false,
                  isBackground:false,
                  isBackground1:false,
                  isBackground2:true,
                })
              }}>
                <Col span={2} style={{marginRight:'2%'}}><img src="image/delete_normal.png" style={{width:'24px',height:'24px'}}/></Col>
                <Col span={19}  style={{color:'#2E2D35',fontSize:"16px",textAlign:'left',padding:'0 5%'}}>{T(messages.myModelCancel)}</Col>
              </Row>
            </div>
          </Modal>
          {
            this.state.visible2 && <Modal
              visible={this.state.visible2}
              transparent
              maskClosable={false}
              title=""
              id="number"
              footer={
                [
                  { text: T(messages.myModelCancel), onPress: () => { this.setState({ visible2: false }) } },
                  {
                    text: T(messages.myModelSure), onPress: () => {
                    this.changeCartItemNumber();
                    this.setState({visible2: false,visible:false,isBackground:false,
                      isBackground1:false,
                      isBackground2:false, })
                  }
                  }
                ]
              }
              afterClose={() => { }}
            >
              <div data-flex="box:first cross:center">
                <div style={{ width: "60px" }}>{T(messages.quantity)}：</div>
                <InputItem placeholder="" type="number" onChange={this.onChange} defaultValue={this.state.currentQuantity}></InputItem>
              </div>
            </Modal>
          }

        </div>
      </IntlProvider>
    )
  }
}
